
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ page isELIgnored="false" %>
<html>
<head>
    <title>留言板</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
            font-family: Microsoft YaHei, Arial, Helvetica, sans-serif;
        }

        .cls {
            clear: both;
        }

        .container {
            width: 800px;
            min-height: 10px;
            margin: 50px auto;
            padding:40px;
            border: 1px solid #dfdfdf;
            box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
        }

        .comment {
            min-height: 60px;
            border-bottom: 1px solid #dfdfdf;
        }

        comment2{
            margin-top:5px;
            border: 1px solid #dfdfdf;
        }

        .comment-avatar img {
            margin: 23px 0px 0px 30px;
            width: 48px;
            height: 48px;
            border-radius: 50%;
        }

        .comment-avatar2 img {
            width: 38px;
            height: 38px;
            border-radius: 50%;
        }

        .comment-content {
            float: right;
            width: 685px;
            padding-top: 15px;
            margin-right: 20px;
        }

        .leftt{
            float: left;
            margin-right:15px;
        }
        .lefts{
            float: left;
            width:600px;
        }

        .comment-content-name {
            font-size: 14px;
            color: #5D5D5D;
            margin-bottom: 5px;
        }
        .comment-content-name2 {
            color: #16BFF4;
        }

        .comment-content-article {
            margin-bottom: 10px;
        }

        .comment-content-footer {
            text-align:left;
            color: #6d757a;
            font-size: 12px;
            margin-bottom: 15px;
        }

        .comment-content-footer > span{
            margin-right: 15px;
        }

        .comment-send {
            position: relative;
            margin-bottom: 40px;
        }

        .comment-send-input {
            outline: none;
            box-sizing: border-box;
            -moz-box-sizing: border-box;
            transition: all 0.3s;
            position: absolute;
            top: 15px;
            left: 95px;
            resize: none;
            width: 605px;
            height: 65px;
            padding: 10px;
            border-radius: 4px;
            background: #f4f5f7;
            border: 1px solid #e5e9ef;
        }

        .comment-send-input:hover, .comment-send-input:active {
            background: #fff;
            color: #555;
        }

        .comment-send-button{
            border: none;
            cursor: pointer;
            user-select: none;
            -moz-user-select: none;
            transition: all 0.3s;
            position: absolute;
            top: 15px;
            right: 15px;
            width: 65px;
            height: 65px;
            border-radius: 4px;
            background: #1aa2d4;
            color: #fff;
            font-size: 14px;
            text-align: center;
        }

        .comment-send-button:hover {
            background: #1eb6e3;
        }

        .infok2 textarea{
            outline: none;
            padding: 6px;
            border-radius: 4px;
            background: #f4f5f7;
            border: 1px solid #e5e9ef;
            resize: none;
        }
        .infok2 textarea:hover, .infok2 textarea:active {
            background: #fff;
            color: #555;
        }
        .infok2 input{
            border: none;
            width: 50px;
            height: 30px;
            border-radius: 4px;
            background: #1aa2d4;
            color: #fff;
            font-size: 14px;
            text-align: center;
            position:relative;
            top:-13px;
        }
        .infok2 input:hover {
            background: #1eb6e3;
        }

        .infok2{
            display:none;
        }

        #fanh{
            width: 60px;
            height: 40px;
            background-color: #0f6c8d;
            text-decoration: none;
            color:black;
            text-align: center;
        }

        a{
            text-decoration: none;
        }
        /*返回样式*/
        .kele:before{ position: absolute; content: " "; border: transparent 14px solid; border-width: 13px 8px ; border-right-color: #CCC; top: 1px; left: -16px; height: 0; width: 0; }
        .kele{cursor: pointer; position: relative; width: 40px; height: 28px; background: #EEE; border-radius: 5px;  margin: 30px; text-align: center; line-height: 28px; color: #999; font-size: 14px; border: 1px solid #CCC; }
        .kele:after{ position: absolute; content: " "; border: transparent 13px solid;  border-width:  12px 8px; border-right-color: #EEE; top: 2px; left: -15px; height: 0; width: 0; }

        /*返回顶部样式*/
        #arrow{border: 9px solid transparent;border-bottom-color: #3DA0DB;width: 0px;height: 0px;top:0px}
        #stick{width: 8px;height: 14px;border-radius: 1px;background-color: #3DA0DB;top:15px;}
        #back_top div{position: absolute;margin: auto;right: 0px;left: 0px;}
        #back_top{background-color: #dddddd;height: 38px;width: 38px;border-radius: 3px;display: block;cursor: pointer;position: fixed;right: 50px;bottom: 100px;display: none;}

    </style>
</head>
<body>
<a href="../nologin/index.jsp"><div class="kele">返回</div></a>
<div id="back_top"><div id="arrow"></div><div id="stick"></div></div>
<div class="container">
    <div class="comment-send">
        <form id="commentForm" method="post" action="/examproject/stu/addcomments">
            <span class="comment-avatar">
                 <img src="${students.stavatar}" alt="avatar">
            </span>
            <textarea id="infok" class="comment-send-input" name="comment" form="commentForm" cols="80" rows="5"
                      placeholder="请自觉遵守互联网相关的政策法规，严禁发布色情、暴力、反动的言论。"></textarea>
            <input class="comment-send-button" type="submit" value="发表留言">
        </form>
    </div>
    <hr style="margin:10px; border:1px dotted gainsboro">
    <div class="comment-list" id="commentList">

        <%--显示评论---首--%>
        <c:forEach items="${comments}" var="comm" >   <%--遍历评论--%>
            <c:forEach var="stall" items="${studentsall }">   <%--遍历用户--%>
                <c:if test="${comm.uid==stall.stid}">  <%--判断评论用户--%>
                    <div class="comment">
                         <span class="comment-avatar">
                             <c:choose>
                                 <c:when test="${stall.stavatar!=null}">
                             <img src="${stall.stavatar}" alt="avatar">
                                 </c:when>
                                 <c:otherwise>
                              <img src="/examproject/images/logo.png" alt="avatar">
                                 </c:otherwise>
                             </c:choose>
                         </span>
                        <div class="comment-content">
                            <p class="comment-content-name">${stall.stname}</p>
                            <p class="comment-content-article">${comm.content}</p>
                            <p class="comment-content-footer">
                                发表于：<span class="comment-content-footer-timestamp">${comm.time}</span>
                                <span class="comment-content-footer-id" onclick="sh(${comm.cid})" style="cursor:pointer;">回复</span>
                            </p>
                            <div class="infok2" id="hfk${comm.cid}" >
                                <form action="/examproject/stu/addreply"  method="post">
                                    <input type="hidden" name="pid" value="${stall.stid}" />
                                    <input type="hidden" name="htype" value="1" />
                                    <input type="hidden" name="cid" value="${comm.cid}" />
                                    <textarea name="comment2"  cols="50" rows="4"
                                              placeholder="请自觉遵守互联网相关的政策法规，严禁发布色情、暴力、反动的言论。"></textarea>
                                    <input type="submit" value="回复">
                                </form>
                            </div>
                            <%--------留言-----首----%>
                            <c:forEach items="${replist}" var="rep" >   <%--遍历留言--%>
                                <c:if test="${comm.cid==rep.cid}">    <%--判断是不是要留言的评论--%>
                                    <c:forEach var="stall2" items="${studentsall }">   <%--遍历用户--%>
                                        <c:if test="${rep.uid==stall2.stid}">  <%--判断评论用户--%>
                                            <div class="comment2">
                                                <div class="leftt">
                                                    <span class="comment-avatar2">
                                                         <c:choose>
                                                             <c:when test="${stall2.stavatar!=null}">
                                                                 <img src="${stall2.stavatar}" alt="avatar">
                                                             </c:when>
                                                             <c:otherwise>
                                                                 <img src="/examproject/images/logo.png" alt="avatar">
                                                             </c:otherwise>
                                                         </c:choose>
                                                    </span>
                                                </div>
                                                <div class="lefts">
                                                    <c:if test="${rep.type==1}">  <%--回复类型--%>
                                                        <p class="comment-content-name">${stall2.stname}</p>
                                                    </c:if>
                                                    <c:if test="${rep.type==2}">  <%--回复类型--%>
                                                        <p class="comment-content-name">
                                                            ${stall2.stname}&nbsp;&nbsp;
                                                            <c:if test="${rep.uid!=rep.pid}">    <%--判断是不是自己--%>
                                                                <c:forEach var="stall3" items="${studentsall }">   <%--遍历用户--%>
                                                                    <c:if test="${stall3.stid==rep.pid}">    <%--判断是不是自己--%>
                                                                        <span class="comment-content-name2">@${stall3.stname}</span>
                                                                    </c:if>
                                                                </c:forEach>
                                                            </c:if>
                                                        </p>
                                                    </c:if>
                                                    <p class="comment-content-article">${rep.content}</p>
                                                    <p class="comment-content-footer">
                                                        发表于：<span class="comment-content-footer-timestamp">${rep.time}</span>
                                                        <span class="comment-content-footer-id" onclick="sh(${rep.rid})" style="cursor:pointer;">回复</span>
                                                    </p>
                                                    <div class="infok2" id="hfk${rep.rid}">
                                                        <form action="/examproject/stu/addreply" method="post">
                                                            <input type="hidden" name="pid" value="${stall2.stid}" />
                                                            <input type="hidden" name="htype" value="2" />
                                                            <input type="hidden" name="cid" value="${comm.cid}" />
                                                            <textarea name="comment2"  cols="50" rows="4"
                                                                    placeholder="请自觉遵守互联网相关的政策法规，严禁发布色情、暴力、反动的言论。"></textarea>
                                                            <input type="submit" value="回复">
                                                        </form>
                                                    </div>
                                                </div>
                                            </div>
                                        </c:if>
                                    </c:forEach>
                                </c:if>
                            </c:forEach>
                            <%--------留言-----尾----%>
                        </div>
                        <div class="cls"></div>
                    </div>
                </c:if>
            </c:forEach>
        </c:forEach>
        <%--显示评论---尾--%>
    </div>
</div>
<script src="../js/jquery-1.10.2.js"></script>
<script>

    var k = document.querySelectorAll(".infok2");
    var tarea = document.querySelectorAll(".infok2 textarea");
    function sh(id){
        for(var i=0;i<k.length;i++){
            tarea[i].value="";
            k[i].style.display="none";  //隐藏
        }
        document.querySelector("#hfk"+id).style.display="block";  //显示
    }

    //1点击事件网页隐藏
    document.addEventListener('click',function(){
        for(var i=0;i<k.length;i++){
            tarea[i].value="";
            k[i].style.display="none";  //隐藏
        }
    })
    //2不会触发外点击事件
    var hbut = document.querySelectorAll(".comment-content-footer-id");
    for(var i=0;i<hbut.length;i++){  //不会触发回复
        hbut[i].addEventListener('click',function(event){
            var e=event||window.event;
            if(e.cancelBubble){
                e.cancelBubble=true;//ie 阻止事件冒泡
            }else{
                e.stopPropagation();// 其余浏览器 阻止事件冒泡
            }
        })
    }
    for(var i=0;i<k.length;i++){   //不会触发回文本域
        k[i].addEventListener('click',function(event){
            var e=event||window.event;
            if(e.cancelBubble){
                e.cancelBubble=true;//ie 阻止事件冒泡
            }else{
                e.stopPropagation();// 其余浏览器 阻止事件冒泡
            }
        })
    }

    // 返回顶端
    $(function(){
        $(window).scroll(function(){  //只要窗口滚动,就触发下面代码
            var scrollt = document.documentElement.scrollTop + document.body.scrollTop; //获取滚动后的高度
            if( scrollt >200 ){  //判断滚动后高度超过200px,就显示
                $("#back_top").fadeIn(400); //淡入
            }else{
                $("#back_top").stop().fadeOut(400); //如果返回或者没有超过,就淡出.必须加上stop()停止之前动画,否则会出现闪动
            }
        });

        $("#back_top").click(function(){ //当点击标签的时候,使用animate在200毫秒的时间内,滚到顶部
            $("html,body").animate({scrollTop:"0px"},300);
        });
    });
</script>
</body>
</html>
